
<template>
	<view class="page">
		<view class="topblock">
			<view class="tabs">
				<tn-tabs :list="tabList" :isScroll="false" :current="tabcurrent" name="name" bold :fontSize="30"
					activeColor="#0E71EB" inactiveColor="#666666" :barWidth="60" @change="tabChange"></tn-tabs>
			</view>
			<view class="notice flex">
				<view class="noticelby" style="left: -13rpx;"></view>
				<view class="noticerby" style="right: -13rpx;"></view>
				<view class="noticel flex">
					<image class="noticemainiconl" src="@/static/img/noticebar.png" mode=""></image>
					<view style="color: #0E71EB;margin-left:20rpx;">|</view>
				</view>
				<tn-notice-bar class="noticemain" @click="noticefun" :list="noticedata" mode="vertical" :fontSize="32" fontColor="#0E71EB" :leftIcon="false" :rightIcon="true" :rightIconSize="34"></tn-notice-bar>
			</view>
		</view>
		<mescroll-body ref="mescrollRef" 
		@init="mescrollInit" 
		@down="downCallback"
		@up="upCallback" 
		:down="downOption">
		<view class="main">
			<view class="main-item" v-for="(item,index) in list" :key="index">
				<view class="item-header flex">
					<view class="item-header-left flex" v-if="item.order_type == 1">
						<view class="item-bg" v-if="item.is_trial == 1">{{ item.source_title }}</view>
						<view class="item-bg" v-if="item.is_trial != 1">{{ item.duration }}小时陪驾</view>
						<view class="item-type">
							<text v-if="item.is_trial != 1">正式课程</text>
							<text v-if="item.is_trial == 1">{{ item.duration }}小时体验课程</text>
						</view>
					</view>
					<view class="item-header-left flex" v-if="item.order_type == 2">
						<view class="item-bg">验车订单</view>
					</view>
					<view class="item-price" v-if="item.order_type == 2"><text style="font-size: 24rpx;">佣金：￥</text>{{ item.coach_amount }}</view>
				</view>
				<view class="item-date flex">
					<view class="item-timer">
						<text>订单来源：</text>
						{{ item.source_title }}
					</view>
				</view>
				<view class="item-date flex">
					<view class="item-timer">
						<text>套餐名称：</text>
						{{ item.menu_name }}
					</view>
				</view>
				<view class="item-date flex">
					<view class="item-timer">
						<text v-if="item.order_type == 1">陪驾时间：</text>
						<text v-if="item.order_type == 2">验车时间：</text>
						{{ item.reserve_time_txt }}
					</view>
				</view>
				<view class="item-date flex" v-if="item.order_type == 1 && item.is_trial != 1">
					<view class="item-timer">
						<text>套餐时长：</text>
						{{ item.menu_total }}小时套餐
					</view>
				</view>
				<view class="item-date flex" v-if="item.order_type == 1 && item.is_trial != 1">
					<view class="item-timer">
						<text>剩余时长：</text>
						{{ item.residue_duration }}小时
					</view>
				</view>
				<view class="item-date" v-if="item.order_type == 2">
					<view class="item-timer">车辆品牌：{{ item.brand }}</view>
					<view class="item-timer">动力类型：{{ item.car_type_txt }}</view>
					<view class="item-timer">车况类型：{{ item.condition_txt }}</view>
				</view>
				<view class="item-info flex" v-if="tabcurrent == 1" @click="callphone(item)">
					联系人： {{ item.username }}</view>
				<view class="item-info" v-if="tabcurrent != 1">联系人：{{ item.username }}</view>
				<view class="item-info flex" v-if="tabcurrent == 1" @click="callphone(item)">
					联系电话：{{ item.mobile | mobileshow }}<text class="tn-icon-tel-circle" style="font-size:35rpx;margin-top:-5rpx;margin-left:10rpx;"></text></view>
				<view class="item-info" v-if="tabcurrent != 1">联系电话：{{ item.mobile | mobileshow }}</view>
				<!-- <view class="item-form flex">
					<view class="item-tips">{{ item.shape_id_txt }}</view>
					<view class="item-tips" v-for="(item,index) in item.shape_id_txt" :key="index">{{ item }}</view>
				</view> -->
				<view class="item-address flex" @click="godestinationfun(item,index)" style="align-items:baseline">
					<view v-if="item.order_type == 1" style="width:180rpx;">陪驾地址：</view>
					<view v-if="item.order_type == 2" style="width:180rpx;">验车地址：</view>
					<view class="item-content">{{ item.address }}</view>
					<view sytle="width:60rpx;height:60rpx" @click="navigationfun(item)">
						<image src="@/static/img/navigation.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="item-warn flex" v-if="item.order_type == 1">
					<view style="width:190rpx;">备注信息:</view>
					<rich-text :nodes="item.remark"></rich-text>
				</view>
				<!-- 抢单 -->
				<block v-if="tabcurrent == 0">
					<view class="item-btn flex">
						<view class="item-btns btn2 marginAuto" @click="isTaking = true;acitem=item;acindex=index">接单</view>
					</view>
				</block>
				<!-- 待服务 -->
				<block v-if="tabcurrent == 1">
					<block v-if="item.order_type == 1">
						<!-- order_type=1（1陪驾 2验车） reserve_type  1随机预约 2直约教练  is_trial 1体验课 否则正式课-->
						<view class="item-btn flex" v-if="item.reserve_type == 1 && item.is_trial != 1">
							<view></view>
							<view class="item-btns btn1" style="width: 240rpx;" @click="getreasonfun(item,index)">放置大厅</view>
						</view>
						<view class="item-btn flex" v-if="item.reserve_type == 2 && item.is_trial != 1">
							<view></view>
							<view class="item-btns btn1" style="width: 240rpx;" @click="getreasonfun(item,index)">拒单</view>
						</view>
					</block>
					<block v-if="item.order_type == 2">
						<view class="item-result center" @click="apifun.navigate('/pages/orderTaking/result','id='+item.id)">
							<image src="@/static/img/upload.png" mode=""></image>
							<view>上传结果</view>
						</view>
					</block>
					<!-- <view class="btn" style="width: 628rpx;margin-top: 36rpx;" @click="isEvaluate = true;acitem=item;acindex=index">点击完成服务</view> -->
				</block>
				<!-- 已完成 -->
				<block v-if="tabcurrent == 2">
					<view class="btn" style="width: 628rpx;margin-top: 36rpx;background: #E4E4E4;color: #999999;">已完成</view>
				</block>
			</view>
		</view>
		</mescroll-body>
		
		<tn-popup v-model="isTaking" mode="center" :borderRadius="50" :maskCloseable="false">
			<view class="popup">
				<view class="popup-title">是否确认接单?</view>
				<view class="popup-btn flex">
					<view class="btns btn1" @click="isTaking = false">取消</view>
					<view class="btns btn2" @click="orderTaking">确定</view>
				</view>
			</view>
		</tn-popup>
		<tn-popup v-model="isRefuse" mode="center" :borderRadius="50" :maskCloseable="false">
			<view class="popup" style="height:auto;padding: 20rpx 0;">
				<view class="popup-title" style="font-size: 40rpx;padding-top: 40rpx;" v-if="reasontype != 2">拒单原因</view>
				<view class="popup-title" style="font-size: 40rpx;padding-top: 40rpx;" v-if="reasontype == 2">放置大厅</view>
				<view class="reasonlist marginAuto" style="margin-top:20rpx;" v-if="reasondata">
					<view class="reasoneach"
					v-for="(item,index) in reasondata" :key="index"
					v-if="reasondata.length > 0"
					@click="sereason = item.title"
					>
					<!-- :class="item.title == sereason ? 'acreasoneach':''" -->
						<view class="se" :class="item.title == sereason ? 'acse':''"></view>
						<view class="ellipsis01" style="width:88%;">{{ item.title }}</view>
					</view>
				</view>
				<view class="popup-content">
					<input type="text" placeholder="请填写拒单原因" v-model="reason" />
				</view>
				<view class="popup-btn flex">
					<view class="btns btn1" @click="isRefuse = false">取消</view>
					<view class="btns btn2" v-if="reasontype != 2" @click="refuseOrder">确定拒单</view>
					<view class="btns btn2" v-if="reasontype == 2" @click="refuse">放置大厅</view>
				</view>
			</view>
		</tn-popup>
		<tn-popup v-model="isEvaluate" mode="center" :borderRadius="50" :maskCloseable="false">
			<view class="popup">
				<view class="popup-title" style="font-size: 40rpx;padding-top: 40rpx;">请填写此学员评价</view>
				<view class="popup-content">
					<input type="text" placeholder="请填写对学员的评价" v-model="eva" />
				</view>
				<view class="popup-btn flex">
					<view class="btns btn1" @click="isEvaluate = false">取消</view>
					<view class="btns btn2" @click="evaluate">确定</view>
				</view>
			</view>
		</tn-popup>
	</view>
</template>

<script>
import number from "../../tuniao-ui/libs/function/number";
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				apifun:this.apifun,
				page: 1,
				ynoticedata:[],
				noticedata:[],
				tabList: [{
					name: '接单'
				}, {
					name: '待服务'
				}, {
					name: '已完成'
				}],
				tabcurrent: 1,
				downOption: { // 3. 下拉刷新
					offset: 50, // 下拉高度多少，开始刷新
				},
				list: [],
				acitem:{},
				actindex:'',
				isTaking: false,  //接单
				isRefuse: false, //拒单
				isEvaluate: false, //评价
				reason:'',
				sereason:'',
				reasontype:'',
				reasondata:[],
				eva:'',
			}
		},
		onLoad(opt) {
			this.getnoticefun();
		},
		onShow() {
			this.tabcurrent = 1;
			this.upCallback();
		},
		methods: {
			/*reserve_type  1随机预约 2直约教练
			type:   1 => '教练拒单',
			2 => '教练放置大厅',
			3 => '平台放置大厅',
			4 => '平台取消',
			5 => '学员取消',
			*/
			getreasonfun(item,index){  //  拒绝列表 
				this.acitem=item;
				this.acindex=index;
				this.sereason='';
				this.reason = '';
				let type=2;
				if(item.reserve_type == 0){
					type = 0
					this.reasondata = [];
					return false
				}else if(item.reserve_type == 1){
					type = 2
				}else if(item.reserve_type == 2){
					type = 1
				}
				this.reasontype = type;
				let sendData = {
					type:type
				}
				this.apifun.unirequest('/partner/order/getReasonList','post',sendData,(res)=>{
					if(res.code === 200){
						this.isRefuse = true;
						let datas = res.data;
						this.reasondata = datas;
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			orderTaking() { // 接单
				let sendData = {
					order_id:this.acitem.id
				}
				this.apifun.unirequest('/partner/order/acceptOrder','post',sendData,(res)=>{
					this.isTaking = false;
					if(res.code === 200){
						let datas = res.data;
						this.list.splice(this.actindex,1);
						this.tabcurrent = 1;
						this.page = 1;
						this.datas = [];
						this.upCallback()
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			refuseOrder(){  // 拒绝
				let sendData = {
					order_id:this.acitem.id,
					reason:this.sereason+','+this.reason
				};
				this.apifun.unirequest('/partner/order/refuseOrder','post',sendData,(res)=>{
					this.isRefuse = false;
					if(res.code === 200){
						let datas = res.data;
						this.list.splice(this.actindex,1)
						this.isRefuse = false;
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			refuse() { // 放置大厅
				let sendData = {
					order_id:this.acitem.id,
					reason:this.sereason+','+this.reason
				};
				this.apifun.unirequest('/partner/order/toPublic','post',sendData,(res)=>{
					this.isRefuse = false;
					if(res.code === 200){
						let datas = res.data;
						this.list.splice(this.actindex,1)
						this.isRefuse = false;
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			evaluate() { // 完成服务-评价
				this.isEvaluate = false;
				let sendData = {
					order_id:this.acitem.id,
					eva:this.eva
				}
				this.apifun.unirequest('/partner/order/evalOrder','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.list.splice(this.actindex,1)
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			godestinationfun(item,index){  // 导航目的地
				uni.openLocation({
					latitude: item.lat,
					longitude: item.lng,
					success: function () {
						
					}
				});
			},
			upCallback() {
				let sendData = {
					type:this.tabcurrent+1,
					page:this.page,
					limit:this.apifun.limit,
				};
				this.apifun.unirequest('/partner/order/getOrderList','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						if(this.page == 1){
							this.list = [];
						}
						this.list = this.list.concat(datas.data);
						this.mescroll.endBySize(datas.last_page, datas.total)
					}else{
						this.apifun.toast(res.msg)
					}
				});
			},
			tabChange(index) {
				this.tabcurrent = index;
				this.page = 1;
				this.datas = [];
				this.upCallback()
			},
			// 公告
			noticefun(index){
				let acid = this.ynoticedata[index].id;
				this.apifun.navigate('/pages/orderTaking/announcement','id='+acid);
			},
			callphone(item){
				uni.makePhoneCall({
					phoneNumber: item.mobile //仅为示例
				});
			},
			navigationfun(item){  // 导航
				uni.openLocation({
					latitude:Number(item.lat),
					longitude:Number(item.lng),
					success: function () {
						console.log('success');
					},
					fail: (err) => {
						console.log(err);
					}
				});
			},
			getnoticefun(){
				let sendData = {};
				this.apifun.unirequest('/partner/index/getNewNotice','post',{},(res)=>{
					if(res.code === 200){
						let datas = res.data;
						let noticedata = []
						datas.forEach((item,index)=>{
							noticedata.push(item.title)
						});
						this.ynoticedata = datas;
						this.noticedata = noticedata;
					}else{
						this.apifun.toast(res.msg)
					}
				})
			}
		},
		filters:{
			mobileshow(phone){
				// if (!/^\d{11}$/.test(phoneNumber)) {
				// 	return "无效的手机号码";
				// }
				return `${phone.slice(0, 3)}****${phone.slice(7)}`;
			}
		},
		// onReachBottom() {
		// 	this.page++;
		// 	this.upCallback();
		// },
		// onPullDownRefresh() {
		// 	this.page = 1;
		// 	this.datas = [];
		// 	this.upCallback();
		// 	uni.stopPullDownRefresh();
		// }
	}
</script>

<style scoped lang="scss">
	.topblock{
		position: sticky;
		top: 0;
		z-index: 10;
		width: 100%;
		background:#F7F7F7;
	}
	.popup {
		width: 600rpx;
		height: 416rpx;
		background-image: url('@/static/img/popupBg.png');
		background-size: cover;
		text-align: center;
	
		.popup-title {
			padding-top: 100rpx;
			font-size: 50rpx;
			color: #064155;
			font-weight: bold;
		}
	
		.popup-content {
			margin: 30rpx auto 0;
			width: 510rpx;
			height:80rpx;
			line-height: 80rpx;
			border-radius: 10rpx;
			font-size: 30rpx;
			background: #FFFFFF;
			padding: 0rpx 16rpx;
			box-sizing: border-box;
			input{
				height:80rpx;
				line-height: 80rpx;
			}
		}
	
		.popup-btn {
			padding-top: 80rpx;
			justify-content: space-evenly;
	
			.btns {
				width: 240rpx;
				height: 100rpx;
				line-height: 100rpx;
				border-radius: 10rpx;
				font-size: 30rpx;
			}
	
			.btn1 {
				color: #1686F8;
				border: 1rpx solid #1686F8;
			}
	
			.btn2 {
				background: #0E71EB;
				color: #FFFFFF;
			}
		}
	}
	
	.tabs {
		width: 100%;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 99;
		height: 100rpx;
		line-height: 100rpx;
		background: #ffffff;
	}

	.notice {
		position: relative;
		width: 690rpx;
		padding:10rpx 0;
		margin:30rpx auto 0;
		border-radius: 20rpx;
		background:#E4EFFF;
		.noticel{
			padding-left:40rpx;
			.noticemainiconl{
				width: 38rpx;
				height: 38rpx;
			}
		}
		.noticemain{
			width:85%;
		}
		.noticelby,
		.noticerby{
			position: absolute;
			top: 40rpx;
			background: #fff;
			width: 26rpx;
			height: 26rpx;
			border-radius: 100%;
		}
		// .notice-content {
		// 	margin-left: 30rpx;
		// 	width: 460rpx;
		// 	font-size: 30rpx;
		// 	color: #0E71EB;
		// }
	}

	.main {
		padding: 20rpx 30rpx;

		.main-item {
			// height: 420rpx;
			border-radius: 20rpx;
			padding: 20rpx 20rpx 30rpx 20rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			margin-bottom: 20rpx;

			.item-header {
				justify-content: space-between;

				.item-header-left {
					height: 44rpx;

					.item-bg {
						padding: 0 10rpx;
						color: #FFFFFF;
						font-size: 28rpx;
						height: 40rpx;
						text-align: center;
						background: #0E71EB;
						border-top: 1rpx solid #0E71EB;
						border-bottom: 1rpx solid #0E71EB;
						border-radius: 6rpx;
					}

					.item-type {
						padding: 0 18rpx;
						border-radius: 6rpx;
						background: #FFFFFF;
						color: #0E71EB;
						font-size: 28rpx;
						box-sizing: border-box;
						border-top: 1rpx solid #0E71EB;
						border-bottom: 1rpx solid #0E71EB;
						border-right: 1rpx solid #0E71EB;
					}
				}

				.item-price {
					color: #FF3B3B;
					font-size: 40rpx;
					font-weight: bold;
				}
			}

			.item-date {
				line-height:60rpx;
				font-size: 28rpx;
			}

			.item-round {
				width: 20rpx;
				height: 20rpx;
				background: #FFFFFF;
				box-sizing: border-box;
				border-radius: 50%;
				border: 3rpx solid #0E71EB;
				margin-right: 10rpx;
			}

			.item-address {
				font-size:28rpx;
				.item-content {
					width: 550rpx;
				}

				image {
					margin-left: 30rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}

			.item-info {
				font-size: 26rpx;
				width:100%;
				line-height: 60rpx;
			}

			.item-form {
				margin-left: 30rpx;
				flex-wrap: wrap;

				.item-tips {
					font-size: 24rpx;
					color: #0E71EB;
					margin-right: 28rpx;
				}
			}
			
			.item-warn {
				padding: 16rpx 0rpx;
				box-sizing: border-box;
				border-radius: 10rpx;
				background: #F7F7F7;
			}

			.item-btn {
				margin-top: 36rpx;
				justify-content: space-between;

				.item-btns {
					width: 300rpx;
					height: 76rpx;
					line-height: 76rpx;
					text-align: center;
					border-radius: 10rpx;
					font-size: 30rpx;
					font-weight: bold;
					box-sizing: border-box;
				}
				.btn1 {
					border: 2rpx solid #0E71EB;
					background: #FFFFFF;
					color: #0E71EB;
				}

				.btn2 {
					background: #0E71EB;
					color: #FFFFFF;
				}
			}
		}
	}
	.item-result {
		margin-top:40rpx;
		padding: 10rpx 0;
		border: 2rpx solid #0E71EB;
		border-radius: 20rpx;
		image {
			width: 52rpx;
			height: 40rpx;
		}
		view {
			font-size: 24rpx;
			color: #0E71EB;
		}
	}
	.reasonlist{
		width: 90%;
		.reasoneach{
			width: 100%;
			height: 60rpx;
			display: flex;
			line-height: 60rpx;
			border-radius:10rpx;
			margin-top: 20rpx;
			text-align: left;
			.se{
				width:30rpx;
				height:30rpx;
				margin-top:16rpx;
				margin-right: 20rpx;
				border: 1px solid #ccc;
				border-radius: 100%;
			}
			.acse{
				background:#0E71EB;
			}
		}
		.acreasoneach{
			background:#0E71EB;
			color: #fff;
		}
	}
</style>